<script setup lang="ts">
import PdList from '../PdList/PdList.vue'
import movieTheater from '../movieTheater/movieTheater.vue'
import { ref } from 'vue'
import type { MovieItem } from '@/types/movieItem';
import { getCinemaHotMovieAllAPI } from '@/services/movieItem'
import { onLoad, onShow } from '@dcloudio/uni-app'





const hotCinemaMovieItemList = ref<MovieItem[]>([])


// 获取影院热映电影数据
const getMovieItemData = async () => {
    const res = await getCinemaHotMovieAllAPI()
    hotCinemaMovieItemList.value = res.result
}



// 页面加载
onLoad(async () => {
    await getMovieItemData()


})




class topListItem {
    name: string;
    defaultStyle: boolean
    id: number
    constructor(name: string, defaultStyle: boolean, id: number) {
        this.name = name;
        this.defaultStyle = defaultStyle;
        this.id = id
    }

}


let status = ref<number>(0);; // 状态

let topList: topListItem[] = [new topListItem('热映', true, 0), new topListItem('影院', false, 1), new topListItem('待映', false, 2)];



//点击tab跳转
function changeTabs(item: topListItem) {
    // console.log(item);

    let obj = topList.find(v => v.defaultStyle)
    if (obj) {
        obj.defaultStyle = false
        item.defaultStyle = true
    }
    status.value = item.id
    // 	this.getRequestList()

    // console.log("status的状态: " + status);
};
</script>

<template>
    <view class="welltab">
        <!-- tab选项 -->
        <view class="flex-around">
            <view v-for="(item, index) in topList" :key="index"
                :class="[item.defaultStyle ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{
                    item.name
                }}</view>
        </view>

        <view v-if="status == 0">
            <view>
                <PdList :list="hotCinemaMovieItemList"></PdList>
            </view>

        </view>
        <view v-if="status == 1">
            <movieTheater></movieTheater>
        </view>
        <view v-if="status == 2">
            <text>暂无电影信息</text>
        </view>
    </view>
</template>

<style lang="scss">
.flex-around {
    width: 50%;
    display: flex;
    justify-content: space-around;
    margin-left: 25%;

}

/* 点击文字的颜色 */
.screen-item-avtive {
    position: relative;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #428AF6;
    letter-spacing: 2rpx;
    padding: 24rpx 0;
}

/* 本来展示的颜色 */
.screen-item {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    color: #333;
    letter-spacing: 2rpx;
    padding: 24rpx 0;
}

/* 点击的底部线条颜色 */
// .screen-item-avtive::after {
//     content: '';
//     position: absolute;
//     left: 50%;
//     bottom: 0;
//     height: 4rpx;
//     background-color: #428AF6;
//     width: 50%;
//     transform: translateX(-50%);
//     border-radius: 4rpx;

//     // transition: all .5s linear;
//     animation: change 1s linear;
// }

/* 底部变化 */
@keyframes change {
    0% {
        width: 50%;
    }

    50% {
        width: 100%;
    }

    100% {
        width: 50%;
    }
}
</style>
